import { IAdminState } from '@/models/adminModel';
import { IAdmin } from '@/types/admin';
import { PlusOutlined } from '@ant-design/icons';
import {
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { useDispatch, useModel, useNavigate, useSelector } from '@umijs/max';
import { Button, Modal, Popconfirm, Switch, Tag, message } from 'antd';
import { useEffect, useState } from 'react';
import AdminForm from '../components/AdminForm';

const AdminList: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  // 在页面中获取全局初始化数据，可以通过 useModel 来进行获取
  const { initialState } = useModel('@@initialState');
  // 从仓库获取管理员数据
  const { adminList }: IAdminState = useSelector((state: any) => state.admin);
  // 控制修改面板开启的状态
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 存储当前要修改的管理员信息
  const [adminInfo, setAdminInfo] = useState<IAdmin>({} as IAdmin);

  /**
   * 删除管理员
   * @param {*} adminInfo
   */
  function handleDelete(adminInfo: IAdmin) {
    // 1.需要判断是否是当前登录的账户

    // 2.派发删除对应的 action
    dispatch({
      type: 'admin/_deleteAdmin',
      payload: adminInfo,
    });
    message.success('删除管理员成功');
  }
  /**
   * 修改管理员可用状态
   */
  function switchChange(row: IAdmin, value: boolean) {
    // 派发一个 action
    dispatch({
      type: 'admin/_editAdmin',
      payload: {
        adminInfo: row,
        newAdminInfo: {
          enabled: value,
        },
      },
    });
    if (value) {
      message.success('管理员状态已激活');
    } else {
      message.success('管理员已禁用');
    }
  }
  /**
   * 打开修改面板
   */
  function showModal(row: IAdmin) {
    setIsModalOpen(true);
    setAdminInfo(row);
  }
  /**
   * 点击修改面板确定按钮时的回调
   */
  const handleSubmit = (value: any) => {
    const newAdminInfo = value;
    if (
      value.avatar &&
      typeof value.avatar === 'object' &&
      value.avatar.file.status === 'done'
    ) {
      newAdminInfo.avatar = value.avatar.file.response.data;
    }
    dispatch({
      type: 'admin/_editAdmin',
      payload: {
        adminInfo,
        newAdminInfo,
      },
    });
    message.success('修改管理员信息成功');
    setIsModalOpen(false);
  };
  /**
   * 点击修改面板取消按钮时关闭该面板
   */
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  useEffect(() => {
    if (!adminList.length) {
      dispatch({
        type: 'admin/_initAdminList',
      });
    }
  }, [adminList]);

  // 对应表格每一列的配置
  const columns: ProColumns<IAdmin, string>[] = [
    {
      title: '登录账号',
      dataIndex: 'loginId',
      key: 'loginId',
      align: 'center',
    },
    {
      title: '登录密码',
      dataIndex: 'loginPwd',
      key: 'loginPwd',
      align: 'center',
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname',
      align: 'center',
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',
      align: 'center',
      valueType: 'avatar',
    },
    {
      title: '权限',
      dataIndex: 'permission',
      key: 'permission',
      align: 'center',
      render: (_, row) => {
        let tag =
          row.permission === 1 ? (
            <Tag color="orange" key={row._id}>
              超级管理员
            </Tag>
          ) : (
            <Tag color="blue" key={row._id}>
              普通管理员
            </Tag>
          );
        return tag;
      },
    },
    {
      title: '账号状态',
      dataIndex: 'enabled',
      key: 'enabled',
      align: 'center',
      render: (_, row) => {
        if (row._id === initialState.adminInfo._id) {
          // 说明是当前登录的账号
          return <Tag color="red">-</Tag>;
        } else {
          return (
            <Switch
              key={row._id}
              size="small"
              defaultChecked={row.enabled ? true : false}
              onChange={(value) => switchChange(row, value)}
            />
          );
        }
      },
    },
    {
      title: '操作',
      width: 150,
      key: 'option',
      align: 'center',
      render: (_, row) => {
        return (
          <div key={row._id}>
            <Button type="link" size="small" onClick={() => showModal(row)}>
              编辑
            </Button>
            <Popconfirm
              title="是否确定删除此管理员"
              onConfirm={() => handleDelete(row)}
              okText="确定"
              cancelText="取消"
            >
              <Button type="link" size="small" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        );
      },
    },
  ];
  return (
    <div>
      <PageContainer>
        <ProTable
          headerTitle={
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => navigate('/admin/add-admin')}
            >
              添加
            </Button>
          }
          dataSource={adminList}
          rowKey={(row) => row._id}
          columns={columns}
          search={false}
          pagination={{
            pageSize: 5,
          }}
        />
      </PageContainer>
      {/* 修改面板 */}
      <Modal
        title="修改管理员信息"
        open={isModalOpen}
        style={{ top: '50px' }}
        footer={false}
        onCancel={handleCancel}
      >
        <AdminForm
          type="edit"
          adminInfo={adminInfo}
          handleSubmit={handleSubmit}
        />
      </Modal>
    </div>
  );
};

export default AdminList;
